<template>
	<view class="xl-search" :style="[{ margin: $xl.parseUnit(margin, 'rpx'), width: $xl.parseUnit(width, 'rpx'), height: $xl.parseUnit(height, 'rpx') }]">
		<slot name="left">
			<view v-if="leftText" class="xl-search__left" :style="{color: leftTextColor}" @tap="clickLeft">
				{{leftText}}
			</view>
		</slot>
		<view class="xl-search__content" :style="{ background: background, borderRadius: shape == 'round' ? '200rpx' : '6rpx', borderColor: borderColor, height: $xl.parseUnit(height, 'rpx') }" @tap="clickSearch">
			<template v-if="$slots.label || label !== null">
				<slot name="label">
					<text class="xl-search__content__label">{{ label }}</text>
				</slot>
			</template>
			<view class="xl-search__content__icon">
				<xl-icon :name="searchIcon" :size="searchIconSize" :color="searchIconColor ? searchIconColor : color" @tap="clickIcon"></xl-icon>
			</view>
			<input
			    confirm-type="search"
			    @blur="blur"
			    v-model="keyword"
			    @confirm="search"
			    :disabled="disabled"
			    @focus="getFocus"
			    :focus="focus"
			    :maxlength="maxlength"
			    placeholder-class="xl-search__content__input--placeholder"
			    :placeholder="placeholder"
			    :placeholder-style="`color: ${placeholderColor}`"
			    class="xl-search__content__input"
			    type="text"
			    :style="[{
					textAlign: inputAlign,
					color: color,
					background: background,
					height: $xl.parseUnit(height, 'rpx')
				}, inputStyle]"
			/>
			<view v-if="keyword && clearabled && focused" class="xl-search__content__icon xl-search__content__close" @tap="clear">
				<xl-icon name="xl-close" size="11" color="#ffffff" ></xl-icon>
			</view>
		</view>
		
		<slot>
			<view :style="[actionStyle]" class="xl-search__action" :class="[(showActionBtn || show) && 'xl-search__action--active']" @tap.stop.prevent="clickAction">
				<xl-icon v-if="actionIcon" :name="actionIcon" :size="actionIconSize" :color="actionIconColor ? actionIconColor : color"></xl-icon>
				<view v-else class="">{{ actionText }}</view>
			</view>
		</slot>
	</view>
</template>

<script setup>

	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['update:modelValue', 'change', 'focus', 'blur', 'clear', 'search', 'clickAction', 'click', 'clickIcon', 'clickLeft'])
	
	import { ref, nextTick, computed, useSlots } from 'vue'
	
	// 双向绑定值，让v-model绑定的值双向变化
	const keyword = computed({
		get:function(){
			return props.modelValue
		},
		set:function(value){
			emits('update:modelValue', value);
			emits('change', value); // 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
		}
	})
	
	let showActionBtn = computed(()=>{
		return !props.animation && props.showAction
	})

	const show = ref(false)   

	// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
	const focused = ref(props.focus)    
	// 获取焦点
	function getFocus() {
		focused.value = true;
		// 开启右侧搜索按钮展开的动画效果
		if (props.animation && props.showAction) show.value = true;
		emits('focus', keyword.value);
	}
	// 失去焦点
	function blur() {
		// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
		// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
		setTimeout(() => {
			focused.value = false;
		}, 100)
		show.value = false;
		emits('blur', keyword.value);
	}
	
	// 清空输入
	// 也可以作为用户通过this.$refs形式调用清空输入框内容
	function clear() {
		keyword.value = '';
		// 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
		nextTick(() => {
			emits('clear');
		})
	}
	
	// 确定搜索
	function search(e) {
		emits('search', e.detail.value);
		try {
			// 收起键盘
			uni.hideKeyboard();
		} catch (e) {}
	}
	// 点击右边自定义按钮的事件
	function clickAction() {
		console.log(keyword.value);
		emits('clickAction', keyword.value);
		try {
			// 收起键盘
			uni.hideKeyboard();
		} catch (e) {}
	}
	
	// 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
	function clickSearch() {
		if (props.disabled) emits('click');
	}
	// 点击搜索框左边图标
	function clickIcon() {
		emits('clickIcon');
	}
	// 点击左边内容
	function clickLeft() {
		emits('clickLeft');
	}
</script>

<style lang="scss" scoped>

/* #ifdef H5 */
// iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除
[type="search"]::-webkit-search-decoration {
    display: none;
}
/* #endif */

.xl-search {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	
	&__left {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
	}

	&__content {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 10px;
		flex: 1;
		justify-content: space-between;
		border-width: 1px;
		border-color: transparent;
		border-style: solid;
		overflow: hidden;

		&__icon {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		&__label {
			color: #303133;
			font-size: 14px;
			margin: 0 4px;
		}
		
		&__close {
			width: 20px;
			height: 20px;
			border-radius: 100px;
			background-color: #C6C7CB;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			transform: scale(0.82);
		}

		&__input {
			flex: 1;
			font-size: 14px;
			line-height: 1;
			margin: 0 5px;
			color: #303133;

			&--placeholder {
				color: #909193;
			}
		}
	}

	&__action {
		font-size: 14px;
		color: #303133;
		width: 0;
		overflow: hidden;
		transition-property: width;
		transition-duration: 0.3s;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */
		display: flex;
		justify-content: center;
		align-items: center;

		&--active {
			width: 40px;
			margin: 0 3px 0 5px;
		}
	}
}
</style>
